import styled from "styled-components"

const StyledChat = styled.div`
      >div{
        ul{
            background-color:#fff;
            padding-top:.086rem;
          li{
            height:.755rem;
            border-bottom: solid #efefef .02rem;
            display:flex;
            justify-content:space-between;
            >div{
              font-size:.14rem;
              display:flex;
              align-items:center;
              width:80%;
              .im{
                  padding:0 .16rem;
                img{
                   height:.48rem;
                }
              }
              .text{
                h1{
                }
                p{
                  overflow: hidden;
                  height: .2rem;
                  color:#adadad;
                }
              }
            }
            >p{
              padding:.2rem .2rem .2rem 0;
              font-size:.09rem;
              color:#adadad;
            }
          }
        }
      }
`

const StyledWind = styled.div`
      overflow-y:scroll;
      height:100%;
`
const StyledSend  = styled.div`

      display:flex;
      flex-direction:column;
      height:100%;
      .msg{
        overflow-y:scroll;
        flex:1;
        ul{
          height:.5rem;
          li{
            display:flex;
            margin-bottom:.2rem;
            .toux{
              height:.44rem;
              padding-right:.2rem;
              padding-left:.2rem;
              img{
                height:.4rem;
                border-radius:.24rem;
              }
              }
            .text{
              display:flex;
              align-items:center;
              height:.44rem;
              position:relative;
              border-radius:.1rem;
              line-height:.44rem;
              background-color:#fff;
              .rect{
                padding:0 .1rem 0 .1rem;
                 }
              .thr{
               position:absolute;
               /* left:-0.16rem; */
               width:0;
               height:0;
               border-top:.08rem solid black;
               border-left:.08rem solid green;
               border-right:.08rem solid red;
               border-bottom:.08rem solid blue;
                /* height:.18rem;
                border:solid 1rem #ccc; */
                border-color: transparent #fff transparent transparent  ; 
              }
            }
          }
        }
      }
      .tab{
        height:.44rem;
        position:sticky;
        bottom:0;
        display:flex;
        background-color:#fff;
         .add{
           >img{
            height:.44rem;
           }
           border-right:solid .01rem #ccc;
         }
         .inp{
           width:70%;
           input{
             height:100%;
             width:100%;
             border-style:none;
             padding-left:.15rem;
           }
         }
         .send{
          >img{
            height:.44rem;
           }
         }
      }
`
export {
  StyledChat,
  StyledWind,
  StyledSend
}